---
title: "Radio Group"
description: A set of radio buttons that allows users to select only one option from a predefined list.
order: 9
published: true
references: ["https://react-spectrum.adobe.com/react-aria/RadioGroup.html#props"]
---

## Basic
A set of round buttons where you can select only one option from the group.
<How toUse="forms/radio-group/radio-group-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/radio
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='radio'/>

## Anatomy
```
import { Description, Label } from "@/components/ui/field"
import { Radio, RadioGroup } from "@/components/ui/radio"
```

```
<RadioGroup name="billing">
  <Label>Billing Cycle</Label>
  <Description>
    Select how often you'd like to be billed
  </Description>

  <Radio value="monthly">
    <Label>Monthly</Label>
    <Description>Billed every month</Description>
  </Radio>
  <Radio value="quarterly">
    <Label>Quarterly</Label>
    <Description>Billed every 3 months</Description>
  </Radio>
  <Radio value="yearly">
    <Label>Yearly</Label>
    <Description>
      Billed once per year with a discount
    </Description>
  </Radio>
</RadioGroup>
```

## Orientation
By default, the radio group is vertically oriented. You can change it to a horizontal orientation by using the `orientation` prop.
<How minW60 toUse="forms/radio-group/radio-group-orientation-demo" />

## Without label
The label is optional. You can omit it if not needed.

## Description
Add a description to the radio group by passing the `description` prop.
<How minW60 toUse="forms/radio-group/radio-group-description-demo" />

## Validation
Try submit the form without selecting any radio option to see the validation error.
<How toUse="forms/radio-group/radio-group-validation-demo" />

## Controlled
You can control the radio group value using the `value` prop.
<How minW60 toUse="forms/radio-group/radio-group-controlled-demo" />

## Uncontrolled
You can control the radio group value using the `defaultValue` prop.
<How minW60 toUse="forms/radio-group/radio-group-uncontrolled-demo" />

## Disabled
When the radio group is disabled, it cannot be interacted with.
<How toUse="forms/radio-group/radio-group-disabled-demo" />
